<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<script src="./vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<style>
	.animated-banner{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		overflow: hidden;
		height: 150px;
	}
	.layer{
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-align: center;
		align-items: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
</style>
<body>
	<div id="app">
		<div class="animated-banner">
			<div class="layer">
				<img src="https://i0.hdslb.com/bfs/vc/8e084d67aa18ed9c42dce043e06e16b79cbb50ef.png"  height="250" width="3000">
			</div>
			<div class="layer">
				<img src="https://i0.hdslb.com/bfs/vc/082e39ef757826401ef82da818310d42e05bc2de.png"  height="165" width="1800">
			</div>
			<div class="layer">
				<img src="https://i0.hdslb.com/bfs/vc/dbd5c17c4315714de9e4ee119694d2e9efaf9639.png"  height="250" width="3000">
			</div>
			<div class="layer">
				<img src="https://i0.hdslb.com/bfs/vc/cd9be0a2716adbae85fd899259381c4b2c2893c7.png"  height="150" width="1800">
			</div>
			<div class="layer">
				<img src="https://i0.hdslb.com/bfs/vc/88537437a7916ecde847fa46652b44fbd3cbbb06.png"  height="165" width="1800">
			</div>
			<div class="layer">
				<img src="https://i0.hdslb.com/bfs/vc/37d9a93baa55870506a6f3e6308e7a0c386b97c7.png"  height="178" width="1950">
			</div>
		</div>
	</div>
	
</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
	function clamp(x,min,max){
		if(x<min) return min;
		if(x>max) return max;
		return x;
	}
	document.onmousemove = function(event){
		var x = event.pageX;
		var y = event.pageY;
		var imgs = document.getElementsByTagName("img");
		imgs[1].setAttribute("style","filter:blur(" + clamp(x/75-7,0,7) + "px); transform:translate(" + x/50 + "px, 0px) rotate(0deg);");
		imgs[2].setAttribute("style","filter:blur(" + clamp(x/125-5,0,5) + "px); transform:translate(" + x/40 + "px, 0px) rotate(0deg);");
		imgs[3].setAttribute("style","filter:blur(" + clamp(x/250-3,0,3) + "px); transform:translate(" + x/30 + "px, 0px) rotate(0deg);");
		imgs[4].setAttribute("style","filter:blur(" + clamp(3-x/250,0,3) + "px); transform:translate(" + x/20 + "px, 0px) rotate(0deg);");
		imgs[5].setAttribute("style","filter:blur(" + clamp(3-x/250,0,3) + "px); transform:translate(" + x/10 + "px, 0px) rotate(0deg);");
	}
	
</script>
</html>